<template>
	<div class="user">
		<van-nav-bar 
			title="个人中心" 
			left-text="返回" 
			right-text="退出" 
			left-arrow 
			@click-left="$router.push('/home')" 
			@click-right="onClickRight"
		/>

		<div class="bottom">
			<div class="bottom-con">
				个人中心
			</div>
			<van-cell title="地址管理" is-link to="/address" />
			<van-cell title="订单中心" is-link to="/order" />
		</div>
	</div>
</template>
<script setup lang='ts'>
// 引入userStore ，此u该userId
import {useUserStore} from '@/store/userStore'
// userStore 就是获取到的store 仓库实例对象，相当于vuex中 this.$stort

import { useRouter } from 'vue-router';

const userStore = useUserStore()
const router = useRouter()

const onClickRight = () => {
	localStorage.removeItem('token')
	userStore.setUserId('')
	router.push('/home')
}

</script>
<style scoped>
.user {
	width: 100%;
	height: 100%;
	background-color: rgb(244, 244, 244);
}
.bottom-con{
	width: 82%;
	margin: 30px auto 6px;
	line-height: 20px;
	font-size: 14px;
	font-weight: 100;
}
.van-cell{
	width: 92%;
	margin: 0 auto;
	border-radius: 8px;
}
</style>